<template>
  <div class="headbar" :style="{background: themeColor}">
        <div class="logo-text" v-if="!isCollapseMenu">
            <a href="" @click="$router.push('/')">
                <img :src="require('@/assets/logo-text-yunglee.png')"/>
            </a>
        </div>
        <div class="logo-text" v-if="isCollapseMenu">
            <a href="" @click="$router.push('/')">
                <img :src="require('@/assets/logo-collapse.png')"/>
            </a>
        </div>


        <div :style="{'margin-left': menuLeft}">
            <!--   下弹框方案 -->
            <el-button v-if="isCollapse" v-popover:popover-collapseMenu class="menu-button">
                <i class="fa fa-bars"></i>
                <el-popover ref="popover-collapseMenu" placement="bottom-end" trigger="click" :visible-arrow="false">
                    <el-menu :default-active="showMenuActiveName"
                             :background-color="themeColor"
                             mode="horizontal">

                        <el-menu-item index="showHome" @click="$router.push('/')">
                            <i class="fa fa-home" aria-hidden="true"></i>&nbsp;
                            <span slot="title">首页</span>
                        </el-menu-item>

                        <el-menu-item v-for="(menu,index) in showMenuList" :key=index :index="menu.index"
                                      @click="gotoRouteHandle(menu)">
                            <i :class="'fa fa-'+ menu.icon " aria-hidden="true"></i>&nbsp;
                            <span>{{ menu.name }}</span>
                        </el-menu-item>

                    </el-menu>
                </el-popover>
            </el-button>

            <!-- 正常展示 -->
            <span v-if="!isCollapse">
                <el-menu class="menu"
                         :default-active="showMenuActiveName"
                         :background-color="themeColor"
                         :collapse-transition="true"
                         mode="horizontal">

                    <el-menu-item index="showHome" @click="$router.push('/')">
                        <i class="fa fa-home" aria-hidden="true"></i>&nbsp;
                        <span slot="title">首页</span>
                    </el-menu-item>

                    <el-menu-item v-for="(menu,index) in showMenuList" :key=index :index="menu.index"
                                  @click="gotoRouteHandle(menu)">
                        <i :class="'fa fa-'+ menu.icon " aria-hidden="true"></i>&nbsp;
                        <span>{{ menu.name }}</span>
                    </el-menu-item>

                </el-menu>
            </span>
        </div>

        <user-show :is-login="isLogin" :user-info="userInfo"></user-show>

    </div>
</template>

<script>

    import {mapState} from 'vuex'
    import {clearLoginInfo} from '@/utils';
    import userShow from '@/components/user/user-show'

    export default {
        data() {
            return {
                //logo图片
                menuLeft: "",
                isCollapseMenu: false,

                //屏幕宽度 长度watch 监听
                fullWidth: 400,
                //菜单组件长度
                allWidth: 20, //菜单宽度
                logo_user_width: 20, //logo+user宽度

                langVisible: false,
                showHeaderBar: true,
                isCollapse: false,
                isShowMenu: false
            }
        },
        components: {userShow},
        watch: {
            // '$route' (to, from){
            //     this.routeHandle(to)
            // },
            fullWidth() {
                this.changeMenu()
            }
        },
        computed: {
            showMenuActiveName: {
                get() {
                    return this.$store.state.common.showMenuActiveName
                },
                set(val) {
                    this.$store.commit('updateShowMenuActiveName', val)
                }
            },
            ...mapState({
                themeColor: state => state.theme.themeColor,
                userInfo: state => state.common.userInfo,
                showMenuList: state => {
                    return state.common.showMenuList.filter(menu => menu.type != 2)
                },
                isLogin: state => state.common.userInfo.username ? true : false,
            }),
        },
        methods: {
            handleResize(event) {
                this.setFullWidth();
            },
            //赋值屏幕宽度
            setFullWidth() {
                let mix_width = 400;
                if (document.documentElement.clientWidth <= mix_width) {
                    this.fullWidth = mix_width;
                } else {
                    this.fullWidth = document.documentElement.clientWidth
                }
            },
            changeMenu() { //修订菜单状态
                this.getMenuWidth();

                if (this.fullWidth <= (this.allWidth + this.logo_user_width)) {
                    this.isCollapse = true; //折叠态
                    this.isShowMenu = false;
                    this.menuLeft = "200px";
                    this.isCollapseMenu = false;
                    if (this.fullWidth <= (80 + this.logo_user_width)) {
                        this.menuLeft = "80px";
                        this.isCollapseMenu = true;
                    }
                } else {
                    this.isCollapse = false;
                    this.isShowMenu = true;
                    this.menuLeft = "200px";
                    this.isCollapseMenu = false;
                }
            },
            //初始化菜单组件长度
            getMenuWidth() {
                //初始化组件长度
                // let logoWidth = this.$el.querySelectorAll("div")[0].clientWidth; // 198
                // let menuWidth = this.$el.querySelectorAll("div")[1].clientWidth; // 85 * 5
                // let userWidth = this.$el.querySelectorAll("div")[2].clientWidth; // 68 * 2
                //获取三个div宽度 取消灵活获取 变化点为菜单数量
                // this.allWidth = logoWidth + menuWidth + userWidth + 20;
                //position  取代 float浮动
                // this.allWidth = 199 + ( 87 * this.showMenuList.length) + 68 + (this.isLogin?0:68) + 50;
                this.logo_user_width = 199 + 68 + (this.isLogin ? 0 : 68);
                this.allWidth = (87 + 87 * this.showMenuList.length) + 50; //首页默认存在 87 + 动态菜单

            },

            // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
            gotoRouteHandle(menu) {

                let url = menu.url;
                if (url.length >= 1) {
                    if (/^http[s]?:\/\/.*/.test(url)) {
                        let iframePath = url.replace('http://', '');
                        iframePath = iframePath.substring(iframePath.lastIndexOf(":") + 1);
                        this.$router.push({path: iframePath})
                    } else {
                        this.$router.push({path: '/' + url})
                    }
                }
            },

            //登出// 退出登录
            logout() {
                this.$confirm(`确定进行[退出]操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.Login.logout().then((data) => {
                        if (data && data.code === 0) {
                            clearLoginInfo();
                            this.$router.push('/login');
                        }
                    })
                });
            },
        },
        mounted() {

            let self = this;
            var scrollFunc = function (e) {
                //deltaY 正负排定上滚下滚
                //deltaY大于0为下滚,deltaY小于0为上滚
                if (e.deltaY > 0) { //下滚
                    self.showHeaderBar = false;
                } else {
                    self.showHeaderBar = true;
                }
            }
            window.onmousewheel = scrollFunc

            this.setFullWidth();
            //初始获取长度
            //菜单数据延迟推送 问题 定时器解决
            let runTime = 0; //执行此时，执行20次，关闭递归
            let runLimit = 20; //执行此时，执行20次，关闭递归
            timerRun(this.changeMenu, 100, runLimit);

            function timerRun(func, time, runLimit) {
                if (!self.showMenuList.length) {
                    if (runTime === runLimit) {
                        func();
                        console.log("递归" + runLimit + "次完毕，取消递归，长度获取失败");
                        return;
                    }
                    setTimeout(() => {
                        timerRun(func, time, runLimit);
                    }, time);
                    runTime++;
                } else {
                    func();
                }
            }
        },
        created() {
            window.addEventListener('resize', this.handleResize);
            this.showMenuActiveName = this.$route.name;
        },
        beforeDestroy: function () {
            window.removeEventListener('resize', this.handleResize)
        },
    }
</script>

<style scoped>
    .headbar {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1030;
        height: 60px;
        width: 100%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
        /*background-color: white;*/
    }

    /* logo设计 */
    .logo-text {
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .logo-text img {
        height: 100%;
    }

    /* 菜单按钮 */
    .menu-button{
        margin-top: 10px;
    }

    /* 菜单 */
    .menu {
        height: 100%;
    }



</style>
